<template>
    <div id="rightTop">
        <div class="heightChart">
            <div class="title">部门工单</div>

            <div id="navTop">
                <div class="navContent" v-for="(item,index) in dataList" :key="index">
                    <div class="navBox" :style="{'color':item.flex_map}">
                        <div class="navTitle">{{item.flex_code}}</div>
                        <div class="navNum">{{item.flex_num}}</div>
                    </div>
                </div>
            </div>


            <div id="navBtm">
                <!--总投诉数  总报修数 部门总数-->
                <div class="cot_box">
                    <div class="cot_item">
                        <div class="cot_item_top">{{complain}}</div>
                        <div class="cot_item_bottom">总投诉数</div>
                    </div>
                    <div class="cot_item">
                        <div class="cot_item_top">{{repairs}}</div>
                        <div class="cot_item_bottom">总报修数</div>
                    </div>
                    <div class="cot_item">
                        <div class="cot_item_top">{{sum}}</div>
                        <div class="cot_item_bottom">部门总数</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getDeptCount, getDeptSum} from "../../../network/home";

    export default {
        name: "rightTop",
        data() {
            return {
                dataList: [
                    // {'flex_code': '周市供水', 'flex_map': '50', 'flex_num': 2},
                    // {'flex_code': '千灯供水', 'flex_map': '60', 'flex_num': 3},
                    // {'flex_code': '巴城供水', 'flex_map': '70', 'flex_num': 12},
                    // {'flex_code': '张浦供水', 'flex_map': '20', 'flex_num': 18},
                    // {'flex_code': '供水分公司', 'flex_map': '30', 'flex_num': 20},
                    // {'flex_code': '开发区自来水', 'flex_map': '56', 'flex_num': 6},
                    // {'flex_code': '水源保护', 'flex_map': '80', 'flex_num': 8},
                    // {'flex_code': '高新区供水', 'flex_map': '90', 'flex_num': 4}
                    // {'flex_code': '周市供水', 'flex_map': '#EA3B17', 'flex_num': 2},
                    // {'flex_code': '千灯供水', 'flex_map': '#2CEA17', 'flex_num': 3},
                    // {'flex_code': '巴城供水', 'flex_map': '#EAE817', 'flex_num': 12},
                ],
                complain: '0',
                repairs: '0',
                sum: '0',

                timer:null,
            }
        },
        mounted() {
            this.getDeptCount();
            this.getDeptSum();

            this.timer = setInterval(() => {
                this.getDeptCount();
                this.getDeptSum();
            }, 30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右边关闭')
            }
        },
        methods: {
            getDeptCount() {
                getDeptCount().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)
                        this.dataList = res.data.splice(0, 24)
                        this.dataList[0].flex_map = '#1CD11A'
                        this.dataList[1].flex_map = '#1CD11A'
                        this.dataList[2].flex_map = '#1AD5A1'
                        this.dataList[3].flex_map = '#1AD5A1'
                        this.dataList[4].flex_map = '#1A68D8'
                        this.dataList[5].flex_map = '#1A68D8'
                        this.dataList[6].flex_map = '#7C5FDD'
                        this.dataList[7].flex_map = '#7C5FDD'
                        this.dataList[8].flex_map = '#BA18BD'
                        this.dataList[9].flex_map = '#BA18BD'
                        this.dataList[10].flex_map = '#59D01A'
                        this.dataList[11].flex_map = '#59D01A'
                        this.dataList[12].flex_map = '#C0181A'
                        this.dataList[13].flex_map = '#C0181A'
                        this.dataList[14].flex_map = '#B4D71A'
                        this.dataList[15].flex_map = '#B4D71A'
                        this.dataList[16].flex_map = '#4EB61A'
                        this.dataList[17].flex_map = '#4EB61A'
                        this.dataList[18].flex_map = '#CF771A'
                        this.dataList[19].flex_map = '#CF771A'
                        this.dataList[20].flex_map = '#D7A71A'
                        this.dataList[21].flex_map = '#D7A71A'
                        this.dataList[22].flex_map = '#D6381A'
                        this.dataList[23].flex_map = '#D6381A'
                    }
                });
            },
            getDeptSum() {
                getDeptSum().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)
                        this.complain = res.data[0].complain
                        this.repairs = res.data[0].repairs
                        this.sum = res.data[0].sum
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 500px;
        height: 800px;
        background: url("../../../assets/img/worksource/a3.png");
        background-size: 500px 800px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #6AFF8B;
    }

    #navTop {
        font-size: 18px;
        color: #ffffff;
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 460px;
    }

    .navContent {
        float: left;
        margin: 15px 26px;
        width: 38%
    }

    .navBox {
        display: flex;
        align-items: center
    }

    .navTitle {
        width: 360px;
    }

    /*.navNum {*/
    /*    color: var(--color-high-text);*/
    /*}*/

    /*底部*/
    #navBtm {
        position: absolute;
        top: 88%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 460px;
        padding: 20px;
        overflow: hidden;
        font-size: 20px;
        color: #ffffff;
        box-sizing: border-box;
    }

    .cot_box {
        width: 100%;
        height: 100px;
        margin-top: 20px;
        display: flex;
        text-align: center;
        justify-content: space-around;
    }

    .cot_item {
        width: 30%;
        border: 1px solid #02509B;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .cot_item_top {
        height: 50px;
        width: 100%;
        font-size: 45px;
        color: #01F5FF;
        background: #0A296C;
        /*padding-top: 10px;*/
        /*transform: translateY(20px);*/
    }

    .cot_item_bottom {
        height: 50px;
        line-height: 50px;
        width: 100%;
        font-size: 20px;
        opacity: 0.8;
    }


    /*进度条*/

    div.progressContainer {
        height: 15px;
        width: 100%;
        border-radius: 5px;
        background-color: #152862;
        margin-left: 2%;
        margin-right: 4%;
    }

    div.progress {
        width: 0;
        background-color: #01F5FF;
        border-radius: 5px;
        height: 15px;
        line-height: 15px;
    }
</style>
